
<template>
  <view class="page">
    <!-- 用户信息区 -->
    <view class="user-info-card">
      <view class="user-info-header">
        <view class="user-avatar">
          <image class="avatar-img" :src="'https://public.readdy.ai/ai/img_res/048bf55a2c23c422d9e796146fb44cfc.jpg'" mode="aspectFill" />
        </view>
        <view class="user-details">
          <view class="user-name">张三</view>
          <view class="user-id">学号：2021001002</view>
          <view class="user-college">计算机科学与技术学院</view>
        </view>
        <uni-icons class="edit-icon cursor-pointer" type="compose" size="24" @click="showEditModal = true" />
      </view>
      <view class="contact-info">
        <view class="info-item">
          <uni-icons type="phone" size="20" />
          <text>手机号：138****8888</text>
        </view>
        <view class="info-item">
          <uni-icons type="email" size="20" />
          <text>邮箱：zhangsan@example.com</text>
        </view>
      </view>
    </view>

    <!-- 行为记录区 -->
    <view class="records-section">
      <view class="filter-bar">
        <uni-data-select v-model="timeRange" :localdata="timeRangeOptions" placeholder="选择时间范围" />
        <view class="type-tags">
          <view 
            v-for="tag in recordTypes" 
            :key="tag.value"
            :class="['type-tag cursor-pointer', { active: selectedType === tag.value }]"
            @click="selectedType = tag.value"
          >
            {{ tag.label }}
          </view>
        </view>
      </view>

      <view class="records-list">
        <view v-for="record in filteredRecords" :key="record.id" class="record-card cursor-pointer">
          <view class="record-icon">
            <uni-icons :type="record.icon" size="24" />
          </view>
          <view class="record-content">
            <view class="record-title">{{ record.title }}</view>
            <view class="record-time">{{ record.time }}</view>
          </view>
          <view :class="['record-status', record.status]">{{ record.statusText }}</view>
        </view>
      </view>
    </view>

    <!-- 通知中心 -->
    <view class="notification-section">
      <view class="section-header">
        <text class="section-title">通知中心</text>
        <text class="mark-all-read cursor-pointer" @click="markAllRead">全部标记已读</text>
      </view>
      <view class="notification-list">
        <view 
          v-for="notice in notifications" 
          :key="notice.id" 
          class="notification-item cursor-pointer"
          @click="markNoticeRead(notice.id)"
        >
          <view class="notice-dot" v-if="!notice.isRead"></view>
          <view class="notice-icon">
            <uni-icons :type="notice.icon" size="20" />
          </view>
          <view class="notice-content">
            <view class="notice-title">{{ notice.title }}</view>
            <view class="notice-time">{{ notice.time }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 反馈按钮 -->
    <view class="feedback-btn cursor-pointer" @click="showFeedbackModal = true">
      <uni-icons type="help" size="20" />
      <text>问题反馈</text>
    </view>

    <!-- 编辑信息弹窗 -->
    <uni-popup ref="editPopup" type="dialog" :mask-click="false" v-model="showEditModal">
      <view class="modal-content">
        <view class="modal-title">修改联系方式</view>
        <view class="form-item">
          <text class="label">手机号</text>
          <input type="text" v-model="editForm.phone" placeholder="请输入手机号" />
        </view>
        <view class="form-item">
          <text class="label">邮箱</text>
          <input type="text" v-model="editForm.email" placeholder="请输入邮箱" />
        </view>
        <view class="modal-buttons">
          <button class="cancel-btn" @click="showEditModal = false">取消</button>
          <button class="confirm-btn" @click="handleEditSubmit">确认</button>
        </view>
      </view>
    </uni-popup>

    <!-- 反馈弹窗 -->
    <uni-popup ref="feedbackPopup" type="dialog" :mask-click="false" v-model="showFeedbackModal">
      <view class="modal-content">
        <view class="modal-title">问题反馈</view>
        <textarea 
          v-model="feedbackForm.content" 
          placeholder="请描述您遇到的问题" 
          class="feedback-textarea"
        />
        <view class="upload-section">
          <view class="upload-title">上传图片（选填）</view>
          <view class="upload-area cursor-pointer" @click="handleUpload">
            <uni-icons type="camera" size="24" />
            <text>点击上传</text>
          </view>
        </view>
        <view class="modal-buttons">
          <button class="cancel-btn" @click="showFeedbackModal = false">取消</button>
          <button class="confirm-btn" @click="handleFeedbackSubmit">提交</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

// 编辑表单数据
const showEditModal = ref(false);
const editForm = ref({
  phone: '',
  email: ''
});

// 反馈表单数据
const showFeedbackModal = ref(false);
const feedbackForm = ref({
  content: '',
  images: [] as string[]
});

// 时间范围选择器数据
const timeRange = ref('');
const timeRangeOptions = [
  { value: '7', text: '最近一周' },
  { value: '30', text: '最近一月' },
  { value: '90', text: '最近三月' }
];

// 记录类型数据
const selectedType = ref('all');
const recordTypes = [
  { label: '全部', value: 'all' },
  { label: '场地预订', value: 'venue' },
  { label: '器材借用', value: 'equipment' },
  { label: '赛事参与', value: 'event' }
];

// 行为记录数据
const records = ref([
  {
    id: 1,
    title: '预订篮球场 A 区',
    time: '2025-03-13 14:00-16:00',
    icon: 'calendar',
    status: 'success',
    statusText: '已完成',
    type: 'venue'
  },
  {
    id: 2,
    title: '借用篮球 5 个',
    time: '2025-03-12 09:00-11:00',
    icon: 'shop',
    status: 'pending',
    statusText: '待归还',
    type: 'equipment'
  },
  {
    id: 3,
    title: '参与校园篮球联赛',
    time: '2025-03-10 15:00-17:00',
    icon: 'flag',
    status: 'success',
    statusText: '已完成',
    type: 'event'
  }
]);

// 通知数据
const notifications = ref([
  {
    id: 1,
    title: '您预订的篮球场即将开始使用',
    time: '10分钟前',
    icon: 'notification',
    isRead: false
  },
  {
    id: 2,
    title: '请及时归还借用的器材',
    time: '1小时前',
    icon: 'info',
    isRead: false
  },
  {
    id: 3,
    title: '校园篮球联赛比赛时间更新通知',
    time: '2小时前',
    icon: 'flag',
    isRead: true
  }
]);

// 筛选后的记录列表
const filteredRecords = computed(() => {
  return records.value.filter(record => {
    if (selectedType.value === 'all') return true;
    return record.type === selectedType.value;
  });
});

// 处理编辑信息提交
const handleEditSubmit = () => {
  // 这里处理信息更新逻辑
  uni.showToast({
    title: '信息更新成功',
    icon: 'success'
  });
  showEditModal.value = false;
};

// 处理反馈提交
const handleFeedbackSubmit = () => {
  if (!feedbackForm.value.content.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none'
    });
    return;
  }
  // 这里处理反馈提交逻辑
  uni.showToast({
    title: '反馈已提交，感谢您的支持',
    icon: 'success'
  });
  showFeedbackModal.value = false;
  feedbackForm.value = {
    content: '',
    images: []
  };
};

// 标记所有通知为已读
const markAllRead = () => {
  notifications.value = notifications.value.map(notice => ({
    ...notice,
    isRead: true
  }));
  uni.showToast({
    title: '已全部标记为已读',
    icon: 'success'
  });
};

// 标记单条通知为已读
const markNoticeRead = (id: number) => {
  const notice = notifications.value.find(n => n.id === id);
  if (notice && !notice.isRead) {
    notice.isRead = true;
  }
};

// 处理图片上传
const handleUpload = () => {
  uni.chooseImage({
    count: 9,
    success: (res) => {
      feedbackForm.value.images = feedbackForm.value.images.concat(res.tempFilePaths);
    }
  });
};
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f5f5f5;
}

.page {
  min-height: 100%;
  padding: 30rpx;
}

.user-info-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
  border-radius: 60rpx;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.user-id, .user-college {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.edit-icon {
  color: #1890ff;
}

.contact-info {
  border-top: 2rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 26rpx;
  color: #666666;
}

.info-item uni-icons {
  margin-right: 16rpx;
  color: #1890ff;
}

.records-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.type-tags {
  display: flex;
  gap: 20rpx;
}

.type-tag {
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666666;
  background: #f5f5f5;
}

.type-tag.active {
  color: #ffffff;
  background: #1890ff;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
}

.record-icon {
  margin-right: 20rpx;
  color: #1890ff;
}

.record-content {
  flex: 1;
}

.record-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999999;
}

.record-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.record-status.success {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.record-status.pending {
  color: #faad14;
  background: rgba(250, 173, 20, 0.1);
}

.notification-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 120rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.mark-all-read {
  font-size: 26rpx;
  color: #1890ff;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  position: relative;
}

.notice-dot {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 16rpx;
  height: 16rpx;
  background: #ff4d4f;
  border-radius: 8rpx;
}

.notice-icon {
  margin-right: 20rpx;
  color: #1890ff;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
}

.notice-time {
  font-size: 24rpx;
  color: #999999;
}

.feedback-btn {
  position: fixed;
  bottom: 30rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #1890ff;
  border-radius: 40rpx;
  color: #ffffff;
  box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.2);
}

.feedback-btn uni-icons {
  margin-right: 10rpx;
}

.modal-content {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 600rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
  display: block;
}

input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.feedback-textarea {
  width: 100%;
  height: 200rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.upload-section {
  margin-bottom: 30rpx;
}

.upload-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  border: 2rpx dashed #e8e8e8;
  border-radius: 8rpx;
  color: #999999;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-top: 30rpx;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666666;
}

.confirm-btn {
  background: #1890ff;
  color: #ffffff;
}

.cursor-pointer {
  cursor: pointer;
}
</style>

